<script lang="ts" setup>
	import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue'
	import { musicLists } from '@/api/groupActivies/index.js';


	const props = defineProps({
		id: {
			type: [Number, String],
			defalut: ''
		},
		title: {
			type: String,
			defalut: ""
		},
		lightColor: {
			type: String,
			default: "radial-gradient(circle, #b67bf4, rgba(0, 0, 0, 0) 80%)"
		},
		musicBoxColor: {
			type: String,
			default: "rgba(182, 123, 244, 0.39)"
		}
	})
	const getMusicList = () => {
		let item = {
			commFileTypeId: props.id
		}
		musicLists(item).then((res : any) => {

			musicList.value = res.data.data.records
			console.log('musicListsmusicLists==>', musicList.value)
			setMusicUrl(true)
		})
	}
	const currentState = ref(false)
	const currentIndex = ref(0)
	const time_format = (second) => {
		let m = Math.floor((second / 60) % 60) < 10 ? '0' + Math.floor((second / 60) % 60) : Math.floor((second / 60) % 60);
		let s = Math.floor(second % 60) < 10 ? '0' + Math.floor(second % 60) : Math.floor(second % 60);
		return `${m}:${s}`;
	}

	const innerAudioContext = uni.createInnerAudioContext();

	const playFlag = ref(false)
	const isPlay = () => {
		if (innerAudioContext.paused) {
			innerAudioContext.play();

		} else {
			innerAudioContext.pause();

		}
	}

	const change_item = (index, item) => {
		console.log(item)
		currentIndex.value = index;
		setMusicUrl(true)

	}


	const musicList = ref([

	])

	const now = ref('00:00')
	const currentTime = ref(0)
	const max = ref(1)
	const duration = ref('00:00')
	const progress_max = ref(0)

	const audioListen = () => {
		innerAudioContext.onTimeUpdate(() => {
			currentTime.value = innerAudioContext.currentTime;
			now.value = time_format(currentTime.value);
			max.value = innerAudioContext.duration;
			// console.log('innerAudioContext.duration', innerAudioContext._audio)
			if (innerAudioContext.duration > 0) {
				duration.value = time_format((innerAudioContext.duration));
				progress_max.value = 100 * (innerAudioContext.currentTime / innerAudioContext.duration);
			}

		});

	}


	innerAudioContext.onError((res) => {
		console.error('播放失败', res.errMsg);
	});

	innerAudioContext.onPause(() => {
		currentState.value = false;
		playFlag.value = false
	});
	innerAudioContext.onPlay((e) => {
		currentState.value = true;
		playFlag.value = true

	});

	innerAudioContext.onEnded(() => {
		switch(musicModel.value) {
			case 1:
			break
			case 2:
			if (currentIndex.value >= musicList.value.length - 1) {
				currentIndex.value = -1
			}
			break
			case 3:
			currentIndex.value = getRandomInteger(0, musicList.value.length - 1)
			break;
			case 4:
			setMusicUrl(true)
			return
		}
		if (currentIndex.value < musicList.value.length-1) {
			currentIndex.value++
			setMusicUrl(true)
		}
	})

	const change = (e) => {
		currentTime.value = e.detail.value
		innerAudioContext.seek(currentTime.value)

	}

	const setMusicUrl = (isPlay = false) => {
		innerAudioContext.pause()
		innerAudioContext.src = musicList.value[currentIndex.value].file?.url
		if (isPlay) {
			innerAudioContext.play()
		}
	}
	onMounted(() => {
		getMusicList();
		audioListen()
		uni.getStorage({
			key: 'musicModel',
			success: (e) => {
				if(e.data) {
					musicModel.value = Number(e.data)
				}
			}
		})
	})


	const initCvs = () => {

	}

	onBeforeUnmount(() => {
		console.log('onBeforeUnmountonBeforeUnmountonBeforeUnmount')
		innerAudioContext.destroy()
	})

	const currentPage = ref(1)

	const next = () => {
		switch(musicModel.value) {
			case 1:
			break
			case 2:
			if (currentIndex.value >= musicList.value.length - 1) {
				currentIndex.value = -1
			}
			break
			case 3:
			currentIndex.value = getRandomInteger(0, musicList.value.length - 1)
			break;
			case 4:
		}
		if (currentIndex.value < musicList.value.length - 1) {
			currentIndex.value++
			setMusicUrl(true)
		}
	}
	const last = () => {
		console.log('lastlastlast')
		if (currentIndex.value > 0) {
			currentIndex.value--
			setMusicUrl(true)
		}
	}

	const navigateBack = () => {
		innerAudioContext.destroy()
		// uni.navigateTo({
		// 	url: '/pages/groupActivities/index/index'
		// })
		uni.navigateBack()
	}
	const musicModel = ref(1)
	const handleMusicModel = () => {
		console.log('musicModel')
		switch(musicModel.value) {
			case 1:
			case 2:
			case 3:
			musicModel.value++
			break;
			case 4:
			musicModel.value = 1
		}
		uni.setStorage({
			key: 'musicModel',
			data: musicModel.value
		})
	}
	const getRandomInteger = (min, max) => {
	  return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
	<articleTable ref='timer'></articleTable>
	<view class="wh100p absolute flex-center column-center">
		<img :src="'@/../static/img/bgIcon/music.svg'" style="opacity: 0.05;width: 30%;" />
	</view>
	<view @touchend="handleEnd" class="wh100p  absolute" :style="{'--lightBg':lightColor}" style="overflow: hidden;">
		<view class="absolute lightAmi  purple" style="width: 300px;height: 300px;
left: -50px;top: -50px;filter: blur(30px);"></view>

		<view class="absolute lightAmi purple"
			style="width: 500px;height: 500px;right: -150px;top: -150px;filter: blur(30px);"></view>

		<view class="absolute wh100p flex">
			<view class="absolute lightAmi shiftLeft purple"
				style="width:50%;height: 800px;bottom: -500px;filter: blur(20px);left: 300px;left: -10%;"></view>
		</view>
	</view>

	<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回"
		:title="props.title" class="absolute">
	</Navigator>
	<view @touchend="handleEnd" class="wh100p  flex-column flex-start align_center" style="background-color: black;"
		:style="{'--musicBoxBg':musicBoxColor}">
		<view class=" music-box flex" style="width: 70%;height: 70%;margin-top: 6%;z-index: 10;">
			<view class="" style="width: 30%;padding:2% 3%;background: rgba(0, 0, 0, 0.05);">
				<view class="wh100p flex-column">
					<view class="flex column-center" style="height: 20%;width: 100%;">
						<img :src="'@/../static/img/bgIcon/music.svg'" style="opacity: 0.8;width: 20%;margin: 0 3%;" />
						<text class="music-title">{{props.title}}</text>
					</view>
					<view class="wh100p musicList" style="overflow: scroll;">
						<view v-for="(item,index) in musicList" :class="index==currentIndex?'music-item-activite':''"
							class="music-item" @click="change_item(index,item)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex-center column-center relative" style="flex:1">
				<img :src="'@/../static/img/groupActivities/needle.png'" class="absolute "
					:class="playFlag?'needle-play':'needle-unPlay'"
					style="top: 10%;left: 13%;transform-origin: top left;z-index:3" />
				<img :src="'@/../static/img/groupActivities/disc2.png'" :class="playFlag?'rotating-box':''" style="" />

			</view>
		</view>

		<view class="absolute" style="width: 100%;height: 13%;bottom: 0;">
			<view class="relative wh100p">
				<view class="audio-controller wh100p"></view>
				<view class="custom wh100p" style="z-index: 999;">
					<slider :value="currentTime" :min="0" :max="max" @change="change" style="margin: 0 1%;"
						activeColor="#32FF9A " />
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view class="time absolute flex column-center" style="z-index: 2;height: 80%;padding: 0 1%;">
							<text class="time-font" style="color: white;">{{ now }} / {{ duration }}</text>
						</view>
						<view class="flex-center column-center "
							style="width: 100%;height: 80%;padding: 0 1%;box-sizing: border-box;">
							<image src="@/static/img/groupActivities/last.png" mode="aspectFit" @click="last"
								style="width: 30px;height: 30px;"></image>
							<view style="margin: 0 40px;">
								<image v-if="currentState" @click="isPlay" src="@/static/img/groupActivities/pause.png"
									mode="aspectFit" style="width: 50px;height: 50px;">
								</image>
								<image v-else @click="isPlay" src="@/static/img/groupActivities/play.svg" mode="aspectFit"
									style="width: 50px;height: 50px;">
								</image>
							</view>
							<image src="@/static/img/groupActivities/next.png" mode="aspectFit" @click="next"
								style="width: 30px;height: 30px;"></image>
						</view>
						<view @tap="handleMusicModel" class="gui-flex gui-align-items-center" style="z-index: 99999;position: absolute;right: 30px">
							<text v-show="musicModel === 1" class="gui-icons gui-color-white" style="font-size: 45px;">&#xe614;</text>
							<text v-show="musicModel === 2" class="gui-icons gui-color-white" style="font-size: 45px;">&#xe677;</text>
							<text v-show="musicModel === 3" class="gui-icons gui-color-white" style="font-size: 45px;">&#xe6cc;</text>
							<text v-show="musicModel === 4" class="gui-icons gui-color-white" style="font-size: 45px;">&#xe64a;
</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	page {
		--lightBg: radial-gradient(circle, rgb(231, 173, 104), rgba(0, 0, 0, 0) 80%);
		--musicBoxBg: rgba(255, 144, 12, 0.39);

		// --yellow: rgba(255, 144, 12, 0.39);
		// --yellowLight: radial-gradient(circle, rgb(231, 173, 104), rgba(0, 0, 0, 0) 80%);
		// --purple: rgba(182, 123, 244, 0.39);
		// --purpleLight: radial-gradient(circle, #b67bf4, rgba(0, 0, 0, 0) 80%);
	}

	.yellow {
		background: var(--yellowLight);
	}

	.yellow-music-box {
		background: var(--yellow);
	}

	.purple {
		background: var(--purpleLight);
	}

	.purple-music-box {
		background: var(--purple);
	}

	.play-list-wrap {
		margin-bottom: 300upx;
	}

	.list {
		width: 100%;

		.item {
			width: 96%;
			padding: 25upx 3%;
			display: flex;
			justify-content: space-between;
			border-bottom: 2upx solid #f0edf1;

			.all {
				font-size: 28upx;

				text {
					display: inline-block;
					margin-left: 15upx;
					font-size: 32upx;
					padding-top: 5upx;
				}
			}

			.delete {
				background: rgba(245, 49, 49, 1);
				border-radius: 8upx;
				padding: 5upx 15upx;
				color: #ffffff;
				font-size: 26upx;
			}

			.story {
				display: flex;
				width: 80%;

				checkbox {
					margin-top: 15upx;
				}

				.story-info {
					margin-left: 15upx;

					.title {
						font-size: 28upx;
					}

					.album {
						font-size: 24upx;
						margin-top: 5upx;
					}
				}
			}

			.controller {
				margin-top: 25upx;

				image {
					display: inline-block;
					width: 32upx;
					height: 32upx;
					margin-right: 20upx;
				}
			}
		}
	}

	.audio-controller {
		position: absolute;
		z-index: 0;
		width: 100%;
		bottom: 0upx;
		background: linear-gradient(180deg, rgba(0, 116, 71, 0.20) 0%, rgba(0, 116, 71, 0.00) 100%), radial-gradient(50% 50% at 50% 10%, rgba(55, 175, 255, 0.6) 0%, rgba(255, 255, 255, 0.00) 100%);
		backdrop-filter: blur(10px);
	}

	::v-deep .custom .uni-slider-handle-wrapper {

		height: 6px;

	}

	.time-font {
		color: #00FF94;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		font-family: PingFang SC;
		font-size: 24px;
		font-style: normal;
		font-weight: 600;
		line-height: 56px;
		/* 175% */
	}

	.music-box {
		box-shadow: 0px 0px 70px 0px rgba(24, 201, 255, 0.3) inset;
		backdrop-filter: blur(10px);
		background: var(--musicBoxBg);

	}

	.music-item {
		display: flex;
		width: 100%;
		padding: 4% 4%;
		box-sizing: border-box;
		align-items: center;
		color: hsla(0, 0%, 88.2%, .8);
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		/* Headline/Medium */
		font-family: PingFang SC;
		font-size: 24px;
		font-style: normal;
		font-weight: 600;
		border-bottom: 1px solid rgba(255, 255, 255, 0.40); // line-height: 36px; /* 128.571% */
	}

	.music-item-activite {
		color: var(--Gray-White, #FFF);
		background-color: rgba(222, 222, 222, 0.1);
	}

	.music-title {
		color: var(--Gray-White, #FFF);
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		/* Headline/Large */
		font-family: PingFang SC;
		font-size: 36px;
		font-style: normal;
		font-weight: 600;
		line-height: 44px;
		/* 122.222% */
	}

	.musicList {
		// transition: 1.6s;
	}

	.needle-unPlay {
		transform: rotate(24deg);
		transition: transform 0.5s ease-in-out;
	}

	.needle-play {
		// transform: rotate(24deg);
		transition: transform 0.5s ease-in-out;
	}

	.rotating-box {
		/* 添加动画，rotate360是@keyframes定义的动画名字 */
		animation: rotate360 5s linear infinite;
	}

	@keyframes rotate360 {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.lightAmi {
		background: var(--lightBg);

		animation: scale12 5s linear infinite alternate;
		// transition: all 5s; 
	}

	.shiftLeft {
		animation: shift 20s linear infinite, scale12 5s linear infinite alternate;
	}

	@keyframes scale12 {
		0% {
			transform: scale(1.2);
			opacity: 0.7;
		}

		50% {
			transform: scale(1.5);
			opacity: 1;
		}

		100% {
			transform: scale(1.2);
			opacity: 0.7;
		}
	}

	@keyframes shift {
		0% {
			left: -20%;
		}

		50% {
			left: 80%;
		}

		100% {
			left: -20%;
		}
	}
</style>